<template>
  <div>
    <el-button plain @click="kaika">
      开卡
    </el-button>

    <el-table :data="tableData">
      <el-table-column
        prop="realname"
        label="持卡人"
        width="180"
      ></el-table-column>
      <el-table-column prop="idcard" label="身份账号" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.idcard.length == 18">
            {{ scope.row.idcard.substring(0, 6) }}******{{
              scope.row.idcard.substring(14, 18)
            }}
          </el-tag>
          <el-tag v-if="scope.row.idcard.length == 15">
            {{ scope.row.idcard.substring(0, 6) }}******{{
              scope.row.idcard.substring(12, 15)
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="cardnumber" label="卡号" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.cardnumber.length == 16">
            {{ scope.row.cardnumber.substring(0, 4) }}******{{
              scope.row.cardnumber.substring(12, 16)
            }}
          </el-tag>
          <el-tag v-if="scope.row.cardnumber.length == 19">
            {{ scope.row.cardnumber.substring(0, 4) }}******{{}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.sex == 1" type="success">男</el-tag>
          <el-tag v-if="scope.row.sex == 0" type="danger">女</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.phone.length == 11">
            {{ scope.row.phone.substring(0, 3) }}******{{
              scope.row.phone.substring(7, 11)
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
          <el-tag v-if="scope.row.status == 1" type="danger">注销</el-tag>
          <el-tag v-if="scope.row.status == 2" type="danger">挂失</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="等级" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.level == 1" type="success">一类卡</el-tag>
          <el-tag v-if="scope.row.level == 2" type="danger">二类卡</el-tag>
          <el-tag v-if="scope.row.level == 3" type="danger">三类卡</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="bankName" label="所在行" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="success" @click="handleEdit(scope.row)">
            修改密码
          </el-button>
          <el-button
            v-show="scope.row.level != 1"
            @click="handlebind(scope.row)"
          >
            绑卡
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="交易" width="180">
        <template #default="scope">
          <el-button @click="zhuanchucard(scope.row)">
            转出
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    修改密码-->
    <el-dialog
      v-model="dialogVisibl"
      title="Tips"
      width="500"
      :before-close="handleClose"
    >
      <span>
        <el-form
          :label-position="labelPosition"
          label-width="auto"
          :model="Bankcards"
          style="max-width: 300px"
        >
          <el-form-item>
            <el-input
              v-model="Bankcards.password"
              placeholder="请原输入密码"
              style="width:180px"
              @blur="checkpassword(Bankcards)"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="Bankcards.newpassword"
              placeholder="请输入新密码"
              type="password"
              style="width:180px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="Bankcards.newpassword2"
              type="password"
              placeholder="请再次输入新密码"
              style="width:180px"
              @blur="checkPassword(Bankcards)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="Bankcards.phone"
              placeholder="请输入手机号"
              style="width:180px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="Bankcards.code"
              placeholder="请输入验证码"
              style="width:180px"
            ></el-input>
            <el-button type="primary" @click="code1(Bankcards.phone)">
              发送验证码
            </el-button>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定修改
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!--    开卡-->
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width=""
      :before-close="handleClose"
    >
      <span>
        <el-form
          :label-position="labelPosition"
          label-width="auto"
          :model="Bankcard"
          style="max-width: 600px"
        >
          <el-form-item label="类型" style="width:200px">
            <el-select v-model="Bankcard.level" placeholder="请选择">
              <el-option label="一类卡" value="1"></el-option>
              <el-option label="二类卡" value="2"></el-option>
              <el-option label="三类卡" value="3"></el-option>
            </el-select>

            <span>
              <p style="font-size: 10px;color: red">一类卡实体卡每人每行一张</p>
              <p style="font-size: 10px;color: red">二类卡电子卡额度限制</p>
              <p style="font-size: 10px;color:red;">三类卡小额消费</p>
            </span>
          </el-form-item>
          <el-form-item label="姓名" style="width:200px">
            <el-input v-model="Bankcard.realname" />
          </el-form-item>
          <el-form-item label="性别" style="width:200px">
            <el-radio-group v-model="Bankcard.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号" style="width:200px">
            <el-input v-model="Bankcard.idcard" />
          </el-form-item>
          <el-form-item label="手机号" style="width:200px">
            <el-input v-model="Bankcard.phone" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>
          <el-button type="primary" @click="open(Bankcard)">
            确定开卡
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--    转账-->
    <el-dialog
      v-model="dialogs"
      title="Tips"
      width=""
      :before-close="handleClose"
    >
      <span>
        <el-form
          :label-position="labelPosition"
          label-width="auto"
          :model="cards"
          style="max-width: 600px"
        >
          <el-form-item label="卡号" style="width:180px">
            <el-input v-model="cards.cardnumber" />
          </el-form-item>
          <el-form-item label="金额" style="width:180px">
            <el-input v-model="cards.balance" />
          </el-form-item>
          <el-form-item label="密码" style="width:180px">
            <el-input v-model="cards.paypassword" type="password" />
          </el-form-item>
          <el-form-item label="手机号" style="width:180px">
            <el-input v-model="cards.phone" />
          </el-form-item>
          <el-form-item label="验证码" style="width:180px">
            <el-input v-model="cards.code" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="code1(cards.phone)">
              发送验证码
            </el-button>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogs = false">关闭</el-button>
          <el-button type="primary" @click="zhuan(cards)">
            转出
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!--绑卡-->

    <el-dialog v-model="dia" title="Tips" width="" :before-close="handleClose">
      <span>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="BIndDto"
          status-icon
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item label="输入卡号">
            <el-input v-model="BIndDto.cardnumber" />
          </el-form-item>
          <el-form-item label="持卡人" prop="realname">
            <el-input v-model="BIndDto.realname" />
          </el-form-item>

          <el-form-item label="身份证号" prop="idcard">
            <el-input v-model="BIndDto.idcard" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="BIndDto.phone" />
          </el-form-item>
          <el-form-item label="code" prop="code">
            <el-input v-model="BIndDto.code" />
            <el-button type="primary" @click="code1(BIndDto.phone)">
              发送验证码
            </el-button>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dia = false">取消</el-button>
          <el-button type="primary" @click="bind(BIndDto)">
            绑定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import {
  checkpass,
  getlist,
  opencard,
  cardsole,
  binding,
  zhuanchu1,
} from '@/api/card'
import request from '@/utils/request'
import { getPhone } from '@/api/login'
const tableData = ref([])
const dialogVisible = ref(false)
const dialogVisibl = ref(false)
const Bankcards = ref({
  password: '',
  newpassword: '',
  newpassword2: '',
  code: '',
  cardnumber: '',
  phone: '',
})
const cards = ref({})
const dialogs = ref(false)
const dia = ref(false)
const Bankcard = ref({
  level: '',
  realname: '',
  sex: '',
  idcard: '',
  phone: '',
})
const BIndDto = ref({})
//转账
const li = async cardnumber => {
  const { code, message, data } = await cardsole(cardnumber)
  if (data.level == 1) {
    alert('可以转账')
  } else {
    alert('请往一类卡转账')
  }
}
const zhuan = async cards => {
  var cardnumber = window.localStorage.getItem('cardnumber')
  const { code, message, data } = await zhuanchu1(cards, cards.cardnumber)
  if (code === 200) {
    alert('转出成功')
  } else {
    alert('转出失败')
  }
}
// 名下所有银行卡列表
const getdata = async () => {
  var phone = window.localStorage.getItem('phone')
  const { code, message, data } = await getlist(phone)
  console.log(data)
  for (let i = 0; i < data.length; i++) {
    tableData.value.push(data[i])
  }
}

const code1 = async phone => {
  const { code, message, data } = await getPhone(phone)
  if (code === 200) {
    alert('成功')
  } else {
    alert('失败')
  }
}
// 转出到一类卡
const zhuanchucard = async row => {
  window.localStorage.setItem('cardnumber', row.cardnumber)
  dialogs.value = true
  alert('转出到一类卡')
}
//判断原密码是否正确
const checkpassword = async Bankcards => {
  alert(Bankcards.cardnumber)
  const { code, message, data } = await checkpass(
    Bankcards.cardnumber,
    Bankcards.password
  )
  if (code === 200) {
    alert('原密码正确')
  } else {
    alert('原密码错误')
  }
}
const kaika = async => {
  dialogVisible.value = true
  Bankcard.value.idcard = window.localStorage.getItem('idcard')
  Bankcard.value.phone = window.localStorage.getItem('phone')
  Bankcard.value.realname = window.localStorage.getItem('realname')
  Bankcard.value.sex = window.localStorage.getItem('sex')
}
//判断两次密码是否一致
const checkPassword = async Bankcards => {
  if (Bankcards.newpassword !== Bankcards.newpassword2) {
    alert('两次密码不一致')
  }
}
//绑卡
const handlebind = async row => {
  window.localStorage.setItem('cardnumber', row.cardnumber)
  const { code, message, data } = await cardsole(row.cardnumber)
  if (code === 200) {
    dia.value = true
  } else {
    alert('已经绑卡')
  }
}
const bind = async BIndDto => {
  var cardnumber = window.localStorage.getItem('cardnumber')
  console.log(cardnumber)
  const { code, message, data } = await binding(BIndDto, cardnumber)
  console.log(code)
  if (code === 200) {
    alert('绑定成功')
  } else {
    alert('绑定失败')
  }
}
//修改密码
const handleEdit = async row => {
  Bankcards.value.cardnumber = row.cardnumber
  Bankcards.value.phone = window.localStorage.getItem('phone')
  dialogVisibl.value = true
}
// 列表
onMounted(() => {
  getdata()
})
// 清空内容
const close = async () => {
  Bankcard.value = ''
  Bankcards.value = ''
  dialogVisible.value = false
}
// 开卡
const open = async Bankcard => {
  var uid = window.localStorage.getItem('id')
  const { code, message, data } = await opencard(Bankcard, uid)
  if (code === 200) {
    alert('开卡成功')
  } else {
    alert('开卡失败')
  }
  dialogVisible.value = false
}
</script>

<style scoped></style>
